import { MaterialPreview } from '@app-base/common/utils/materialPreview';
import React from 'react';
import ColorPicker from './ColorPicker';
import { Checkbox, CheckboxProps } from 'antd';

interface MaterialAppearancePanelProps {
  onColorChange: (c: string) => void;
  disabled?: boolean; // 新增属性，控制外观是否可编辑
  MaterialPreviewParams: {
    baseColor: string;
    metalness: number;
    roughness: number;
    name: string; // 用于玻璃材质的特殊处理
    textureFiles: {
      key: string;
      url: string;
    }[];
  };
  isUseStandardMaterialAppearance: boolean; // 是否使用标准材料外观
  setIsUseStandardMaterialAppearance: (value: boolean) => void; // 设置是否
}

const MaterialAppearancePanel: React.FC<MaterialAppearancePanelProps> = ({
  onColorChange,
  MaterialPreviewParams,
  disabled = false, // 默认可编辑
  isUseStandardMaterialAppearance,
  setIsUseStandardMaterialAppearance,
}) => {
  const onChange: CheckboxProps['onChange'] = (e) => {
    setIsUseStandardMaterialAppearance(e.target.checked);
  };

  return (
    <div className='flex flex-col items-center gap-2 mt-8'>
      <div style={{ width: '100%', height: 160 }}>
        <MaterialPreview {...MaterialPreviewParams} />
      </div>
      <div>
        <Checkbox
          disabled={disabled}
          checked={isUseStandardMaterialAppearance}
          onChange={onChange}
        >
          应用标准材料外观
        </Checkbox>
        <ColorPicker
          color={MaterialPreviewParams.baseColor}
          onChange={onColorChange}
          disabled={disabled || isUseStandardMaterialAppearance}
        />
      </div>
    </div>
  );
};

export default MaterialAppearancePanel;
